[Angular8][小ネタ] クライアントに返ってくるAPIのレスポンスを簡単に変える方法

どうも！大阪オフィスの西村祐二です。

大量のデータがレスポンスで返ってきたときにSPAの画面はどういった挙動になるか確認したい、または、APIはまだ開発中でとりあえず、レスポンスをモックしたいなど、クライアントに返ってくるデータを変えたいときがあると思います。

それを実現するためにいろいろな方法があると思います。

例えば、Angularのチュートリアルで紹介されているように In-memory Web APIモジュールを利用する方法や、ローカルでAPIサーバを立てる方法などありますが、ちょっと手間でした。

そこまで作業量をかけずにサクッと確認する方法がないか探していました。

良さそうな方法があったのでご紹介したいと思います。

さっそく結論

APIリクエストしてアイテムを取得するgetItems()があるとします。そこではAngularで提供されるHTTPリクエストできるライブラリを使ってGETメソッドでリクエストしています。

通常、URLを記載するところにassets配下に置いたjsonを渡すとそれをレスポンスとして返してくれます。

  getItems(): Observable<Item[]> {
    return this.http.get<any>('/assets/data/item.json');
  }

この方法をつかって簡単にクライアントに返ってくるレスポンスを変えることができます。

おまけ：レスポンスの確認方法（Chrome）

API叩いてるけど、どんなレスポンスが返ってきてるかわからない、コンソールlogにもだしてない。

そんなときの確認方法です。

デベロッパーツールを開き、「Network」のタブに移動して、画面リロードします。

すると、通信情報がドバーッと流れます。

確認したいAPIリクエストをクリックするとResponseが確認できます。

この情報をもとにデータ量を大量にしたJSONファイルを作成し、上記の方法で指定することでSPAの動作確認をすることができます。

さいごに

APIリクエスト時のクライアントに返ってくるデータを変える方法を紹介しました。

とても簡単に変更できますが、調べてもあまり出てこなかったのでブログにしてみました。

大量のデータが返ってきたときの動作確認の他にも、この方法を使えば、サーバーサイドがなくてもアプリケーションを実装できますね。

サーバーサイドができたら、json指定しているところをURLに差し替えるだけで、連携できるもの嬉しいところですね。

誰かの参考になれば幸いです。